<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <h1>{{message}}</h1>
    <h2>{{name}}</h2>
</div>
<script src="../js/vue.js"> </script>   <!--引用js文件-->
<script>
// let(在es6里面定义变量)/const(在es6里面定义常量)
// 编程范式：声明式编程
const app=new Vue({ // 创建了一个Vue实例赋值给常量app，传入一个对象类型参数
    el:'#app' ,//el属性：该属性决定了这个Vue对象挂载到哪一个元素上（挂载到了id为app的元素上）
    data:{ // data属性：定义数据 该属性中通常会存储一些数据，这些数据可以是我们直接定义出来的，也可能来自网络，从服务器加载的
        message:'你好',
        name:'阿絮'
    }
})
// 原始js的做法（编程范式：命令式编程）
// 1.创建div元素，设置id属性
// 2.定义一个变量叫message
// 3.将message变量放在前面的div元素中显示
// 4.修改message的数据：今天天气不错
// 5.将修改后的数据再次替换到div元素中
</script>
</body>
</html>